<template>
  <div class="workbench-wrapper">
    <!-- <div class="top-box">
      <div class="item-box">
        <p class="title">
          <span>账户信息</span>
          <el-icon @click="showFn">
            <component :is="showMoney ? View : Hide" />
          </el-icon>
        </p>
        <template v-if="showAdminInfo">
          <div class="account-box">
            <div class="content">
              <p>全网算力券余额</p>
              <p>{{ showMoney ? homeInfo.voucherMoney : '*****' }}</p>
            </div>
            <div class="content">
              <p>算力券余额</p>
              <p>{{ showMoney ? homeInfo.adminVoucherMoney : '*****' }}</p>
            </div>
          </div>
          <div class="account-box">
            <div class="content">
              <p>本月激励</p>
              <p>{{ showMoney ? homeInfo.monthIncentive : '*****' }}</p>
            </div>-
            <div class="content"></div>
          </div>
        </template>

        <div
          class="account-box"
          v-else>
          <div class="content">
            <p>算力券余额</p>
            <p>{{ showMoney ? homeInfo.voucherMoney : '*****' }}</p>
          </div>
          <div class="content">
            <p>本月激励</p>
            <p>{{ showMoney ? homeInfo.monthIncentive : '*****' }}</p>
          </div>
        </div>
      </div>
      <div class="item-box">
        <p class="title">公告</p>
        <el-scrollbar>
          <ul class="notice-box">
            <li
              v-for="item in homeInfo.noticeList"
              :key="item.id">
              <span class="tag-name">{{ item.createTime }}</span>
              <span class="tag-content">{{ item.content }}</span>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
    <div class="bottom-box">
      <div class="item-box">
        <p class="title">排名</p>
        <div
          class="chart-box"
          id="chartBox"></div>
      </div>
    </div> -->
    <div class="top-box">
      <!-- 数据看板 -->
      <div class="data-board">
        <tooltip />
      </div>
    </div>
    <!-- 下方内容 -->
    <div class="bottom-box">
      <!-- 客户消费排行 -->
      <div class="item-box">
        <p class="title">客户消费排名</p>
        <el-divider />
        <div class="chart-box" id="chartBox" v-if="homeInfo.rank!=[]">
        </div>
        <div v-else>
          <el-empty description="暂无数据" />
        </div>
      </div>
      <div class="item-box">
        <p class="title">公告</p>
        <el-divider />
        <el-scrollbar v-if="homeInfo.noticeList">
          <ul class="notice-box">
            <li
              v-for="item in homeInfo.noticeList"
              :key="item.id">
              <span class="tag-content">{{ item.title }}
                <el-tooltip placement="top">
                  <template #content> 
                    {{ item.content }}
                  </template>
                  {{ item.content }}
                </el-tooltip>
              </span>
            </li>
          </ul>
        </el-scrollbar>
        <div v-else>
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useUserStore } from '@/stores/user';

  import { homePage,getNoticeList_v2,getRankList } from '@/api/index';

  import { View, Hide } from '@element-plus/icons-vue';
  import echarts from '@/utils/echarts.js';

  import tooltip from './components/tooltip.vue';

  let showMoney = ref(false);
  function showFn() {
    showMoney.value = !showMoney.value;
  }

  let homeInfo = ref({
    adminVoucherMoney: 0,
    monthIncentive: 0,
    voucherMoney: 0,
    noticeList: [],
    rank: []
  });

  function getHomeInfo() {
    homePage().then(res => {
      console.log(res.data,'5555')
      res.data.voucherMoney =parseFloat(res.data.voucherMoney.toFixed(2))
      res.data.adminVoucherMoney = res.data.adminVoucherMoney==null?0:parseFloat(res.data.adminVoucherMoney.toFixed(2))
      res.data.monthIncentive =parseFloat(res.data.monthIncentive.toFixed(2)) 
      homeInfo.value = res.data;

      initLineChart();
    });
  }

  // 获取公告数据
  function getNoticeList() {
    getNoticeList_v2(
      {
        page:1,
        pageSize:20
      }
    ).then(res => {
      homeInfo.value.noticeList = res.data.content;
    });
  }

  // 获取消费排名数据
  function getRank() {
    getRankList().then(res => {
      homeInfo.value.rank = res.data;
      console.log(res.data,homeInfo.value.rank ,'res.data')
      if (res.success) {
        initLineChart()
      }
    });
  }
  function initLineChart() {
    let chartDom = document.getElementById('chartBox');
    if (!chartDom) {
      return;
    } else {
      echarts.dispose(chartDom);
    }

    const dataX = homeInfo.value.rank.map(item => item.orderPrice);
    const dataY = homeInfo.value.rank.map(item => item.accountName);


    setTimeout(() => {
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: dataY
        },
        series: [
          {
            type: 'bar',
            data: dataX
          }
        ]
      };

      myChart.setOption(option, true);
    }, 300);
  }

  let showAdminInfo = ref(false);

  onMounted(() => {
    const userStore = useUserStore();
    showAdminInfo.value = userStore.user.type === 3 ? true : false;
    // getHomeInfo();
    getNoticeList();
    getRank();
  });
</script>

<style lang="scss" scoped>
  .workbench-wrapper {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 20px;
    height: 60%;
    .top-box {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-column-gap: 20px;
      background-color: #fff;
    }
    .tag-content {
      display: inline-block;
      padding: 5px;
      background-color: #f0f0f0;
      color: #333;
      border-radius: 5px;
      margin-right: 10px;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
      max-width: 100%; /* 设置一个最大宽度，根据需要调整 */
      min-width: 80%;
    }
    .data-board{
      width: 100%;
    }

    .bottom-box {
      flex-shrink: 0;
      flex: 1;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr;
      grid-column-gap: 20px;
      height: calc(100% * 2.35);

      .item-box {
        .chart-box {
          flex: 1;
        }
      }
    }

    .item-box {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 15px;
      background-color: #fff;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

      .title {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        margin-bottom: 0px;
        font-size: 18px;

        .el-icon {
          margin-left: 15px;

          &:hover {
            cursor: pointer;
            color: var(--color-primary);
          }
        }
      }

      .account-box {
        display: flex;
        justify-content: space-around;
        padding-top: 40px;

        .content {
          flex-shrink: 0;
          width: 50%;
          user-select: none;
        }

        p {
          margin-bottom: 20px;
          font-size: 16px;
          text-align: center;
        }
      }

      .notice-box {
        max-height: 300px;
        overflow: hidden;
        li {
          display: flex;
          line-height: 20px;
          margin-bottom: 12px;
          font-size: 16px;

          .tag-name {
            min-width: 50px;
            flex-shrink: 0;
          }

          .tag-content {
            margin-left: 10px;
            max-width:300px;
          }
        }
      }
    }
  }
</style>
